<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-13 11:45:37
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-11-06 16:28:50
 * @FilePath: \票务管理\app\ticketing-management\vue-project\src\views\home\Order\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="train-container">
        <div style="width: 100%;height:100%;padding: 10px;" v-if="TabTypeList.type == 'data'">
            <div :class="{ 'isWide': isWide, 'isNarrow': isNarrow }">
                <div class="header-left">

                    <div>
                        预定时间
                    </div>
                    <a-config-provider :locale="loca">
                        <a-space class="time" direction="vertical">
                            <a-range-picker style="width: 220px;" @change="onChange" v-model:value="StartEndTime" />
                        </a-space>
                    </a-config-provider>
                    <div class="trainType">
                        席坐类型
                    </div>
                    <a-space>
                        <a-select v-model:value="SelectValue" style="width: 85px" @change="handleChangeTain">
                            <a-select-option value="全部">全部</a-select-option>
                            <a-select-option value="高速动车">高铁</a-select-option>
                            <a-select-option value="普通列车">普通</a-select-option>
                            <a-select-option value="动车">动车</a-select-option>
                            <a-select-option value="普快">普快</a-select-option>
                            <a-select-option value="特快">特快</a-select-option>
                        </a-select>
                    </a-space>
                    <div class="trainType">
                        状态
                    </div>
                    <a-space>
                        <a-select v-model:value="SelectValue" style="width: 85px" @change="handleChange">
                            <a-select-option value="已付款">已付款</a-select-option>
                            <a-select-option value="已取消">已取消</a-select-option>
                            <a-select-option value="待付款">待付款</a-select-option>
                            <a-select-option value="已取票">已取票</a-select-option>
                        </a-select>
                    </a-space>

                </div>
                <div class="header-right">
                    <a-input-search class="searchInp" placeholder="搜索ID/车次" style="width: 135px" @search="onSearch" />
                    <a-button @click="addTable" type="primary" style="background: #1BA9BA;">
                        <template #icon>
                            <FileExcelOutlined />
                        </template>
                        批量取消
                    </a-button>
                </div>
            </div>
            <div class="train-main">
                <!-- arrival_station: "上海"
                arrival_time: "2023-11-10T04:00:00.000Z"
                carriage_seat_number: "02车09号"
                departure_date: "2023-11-09T16:00:00.000Z"
                departure_station: "北京"
                departure_time: "2023-11-10T00:00:00.000Z"
                order_id: "E123456"
                passenger_name: "张三"
                seat_type: "商务座"
                status: "已付款"
                ticket_price: 500
                train_type: "高铁" -->
                <el-table :data="TabLe.tableData" stripe style="width: 100%">
                    <el-table-column type="selection" width="55" />
                    <el-table-column align="center" label="订单信息">
                        <template #default="scope">
                            <div style="text-align: left;">
                                <div style="width: 100%;color:#1BA9BA;font-weight: 700;">{{ scope.row.order_id }}
                                </div>
                                <div style="width: 100%;">{{ scope.row.passenger_name }}</div>
                                <div style="width: 100%;">{{ new Date(scope.row.arrival_time).toLocaleString() }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="车次/类型">
                        <template #default="scope">
                            <div style="text-align: center;">
                                <div style="width: 100%;color:#1BA9BA;font-weight: 700;">{{ scope.row.train_number }}
                                </div>
                                <div style="width: 100%;">{{ scope.row.train_type }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div style="text-align: center;" v-if="scope.row.status == '已付款' || scope.row.status == '待付款'">
                                <el-tooltip content="编辑">
                                    <el-icon size="17px" @click="edit(scope)" color="#1BA9BA">
                                        <Edit />
                                    </el-icon>
                                </el-tooltip>
                                <a-popconfirm style="width: 120px;" title="确认要删除啊?" ok-text="是" cancel-text="否"
                                    @confirm="confirmDel(scope)" @cancel="cancel">
                                    <el-icon style="margin-left: 10px;" size="17px" color="#1BA9BA">
                                        <Delete />
                                    </el-icon>
                                </a-popconfirm>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block">
                    <el-config-provider :locale="zhCn">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="page.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="page.lengths">
                        </el-pagination>
                    </el-config-provider>
                </div>
            </div>

        </div>
        <div style="background:#f5f5f5;width: 100%;height:100%;padding: 10px;" v-else>
            <router-view></router-view>
        </div>

    </div>
</template>
<script setup lang="ts">

import * as api from "../../../api/index"
import { FileExcelOutlined } from '@ant-design/icons-vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import loca from 'ant-design-vue/es/locale/zh_CN';
import TabAddEdit from "@/components/TabAddEdit.vue";
import { onMounted, onCreated, onBeforeUnmount, reactive, ref, watch, computed } from "vue";
import { Moment } from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useOrdersStore } from '@/modules/orders'
import { useEditTrain } from '@/modules/edittrain'
import { message } from 'ant-design-vue';


const route = useRoute()
const router: any = useRouter()

const StartEndTime = ref<Moment[]>([])
const SelectValue: any = ref('全部')
const isDevToolsOpen = ref(false);

const EditTrain = useEditTrain()
const OrdersStore = useOrdersStore()


const page = reactive({
    currentPage: OrdersStore.currentPage,
    pageSize: OrdersStore.pageSize,
    lengths: 0
})

// 检测页面宽度
const isWide = ref(true);
const isNarrow = ref(false);

const TabLe = reactive({
    tableData: [], //分页完的数据
    datalist: [] //所有数据
})

// 编辑/新增
const TabTypeList = reactive({
    type: 'data',
    data: []
})

const dialogVisible = ref(false)

// 每页的条数
const handleSizeChange = (val: any) => {
    console.log(`每页 ${val} 条`);
    page.pageSize = val
    OrdersStore.setPageSize(val)
    OrdersStore.setCurrentPage(1)
    page.currentPage = 1
    getOrderss()

}
// 当前页
const handleCurrentChange = (val: any) => {
    console.log(`当前页: ${val}`);
    page.currentPage = val
    OrdersStore.setCurrentPage(val)
    getOrderss()
}


const getOrderss = async () => {
    await OrdersStore.getOrders()
    TabLe.tableData = OrdersStore.list
    TabLe.datalist = OrdersStore.datalist
    page.lengths = OrdersStore.datalist.length
}

const onChange = (date: Moment, dateString: string[]) => {
    if (date != null) {
        const startDate = dateString[0]
        const endDate = dateString[1]
        const filteredData = TabLe.datalist.filter((item: any) => {
            let formattedTime = item.created_at.split(' ')[0]
            return formattedTime >= startDate && formattedTime <= endDate;
        });
        TabLe.tableData = filteredData
        page.lengths = filteredData.length
    } else {
        page.pageSize = 5
        getOrderss()
    }

};
const handleChangeTain = (value: string) => {
    if (value == "全部") {
        page.pageSize = 5
        getOrderss()
    } else {
        page.pageSize = 10
        let TableFilter = TabLe.datalist.filter((item: any) => item.train_type == value)
        TabLe.tableData = TableFilter
        page.lengths = TableFilter.length
    }
}

const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
};

const handleWindowResize = () => {
    const windowWidth = window.innerWidth;
    if (windowWidth > 1200) {
        isWide.value = true;
        isNarrow.value = false;
    } else if (windowWidth < 1200) {
        isWide.value = false;
        isNarrow.value = true;
    }
};
onMounted(() => {
    window.addEventListener('resize', handleWindowResize);
    getOrderss()
    handleWindowResize();
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleWindowResize);
});


// 新增
const addTable = () => {
    TabTypeList.type = 'add'
    localStorage.setItem('type', 'add')
    router.push('/home/trainnumber/addtrain')
}
// 编辑
const edit = (value: any) => {
    TabTypeList.type = 'edit'
    localStorage.setItem('type', 'edit')
    router.push('/home/trainnumber/edittrain')
    EditTrain.setList(value.row)
}
// 删除
const confirmDel = async (e: any) => {

};

const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('取消删除');
};

watch(() => router, () => {
    let type = localStorage.getItem('type')
    if (route.path == '/home/trainnumber') {
        if (type == 'data') {
            TabTypeList.type = 'data'
        } else if (type == 'add') {
            TabTypeList.type = 'add'
            router.push('/home/trainnumber/addtrain')
        } else if (type == 'edit') {
            TabTypeList.type = 'edit'
            router.push('/home/trainnumber/edittrain')
        }
    }
    getOrderss()
}, { deep: true, immediate: true })

</script>

<style scoped lang="scss">
.cell {
    display: flex;
}

::v-deep .el-dialog {
    width: 600px;
}

::v-deep .el-table th.el-table__cell {
    background-color: #d8dbe2;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.train-container {
    width: 100%;
    height: 600px;
    background-color: #fff;

    .el-pagination {
        justify-content: flex-end;
    }

    .isWide {
        // 没有打开开发者工具
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .header-left {
            width: 48%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-right {
            width: 26%;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
    }

    .isNarrow {
        // 打开开发者工具后的样式
        // ...
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .header-left {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time {
                margin-left: 5px;
            }

            .trainType {
                margin: 0 5px;
            }
        }

        .header-right {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .searchInp {
                margin: 0 5px;
            }
        }
    }
}
</style>